<template>
  <ul class="dark-mode">
    <li
      v-for="(item, index) in list"
      @click="onClick(index)"
      :class="tabIndex === index ? 'active' : ''"
      :key="item"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
/**
 * 设置默认tabIndex:
 * 1. 考虑到用户刷新页面的时候，怎么办？这个时候，用户刷新的时候，会触发 created生命周期，
 * 2. 所以，切换保持tabindex下标的函数，需要在以上地方调用
 */
export default {
  data() {
    return {
      list: ['浅色', '深色'],
      tabIndex: 0,
    }
  },
  computed: {
    ...mapState(['darkMode']),
  },
  // 用户进入页面的时候，设置默认值
  created() {
    this.setDefaultTabIndex(this.darkMode)
  },
  methods: {
    ...mapMutations(['SET_DARK_MODE']),
    setDefaultTabIndex(v) {
      if (v === 'light') {
        this.tabIndex = 0
      } else {
        this.tabIndex = 1
      }
    },
    onClick(index) {
      this.tabIndex = index
      if (index === 0) {
        this.SET_DARK_MODE('light')
      } else {
        this.SET_DARK_MODE('dark')
      }
    },
  },
}
</script>

<style scoped lang="scss">
.dark-mode {
  li {
    height: 0.9rem;
    padding-left: 20px;
    line-height: 0.9rem;
    background: #fff;
  }
  .active {
    color: rgb(13, 171, 224);
  }
}
</style>
